<template>
	<view>
		<uni-popup ref="popup" type="center" @change="popChange">
			<view class="tip-view">
				<text class="title">{{dataSource.title}}</text>
				<input v-if="dataSource.maxlength" class="input" :placeholder="dataSource.hint" @input="onKeyInput" />
				<input v-else class="input" :placeholder="dataSource.hint" @input="onKeyInput" />
				<view class="btn-view">
					<text class="btn-left" @click="leftClick">{{dataSource.leftTxt}}</text>
					<text class="btn-right" @click="rightClick">{{dataSource.rightTxt}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "input-dialog",
		props: {
			isShow: false,
			dataSource: Object,
		},
		watch: {
			isShow(val) {
				if (val) {
					this.$refs.popup.open();
				}
			}
		},
		data() {
			return {
				inputKey: "",
			};
		},
		methods: {
			onKeyInput: function(event) {
				this.inputKey = event.target.value
			},
			popChange(e) {
				if (!e.show) {
					var obj = {
						inputStr: "",
						isclose: false,
						tag: this.dataSource.tag
					};
					this.$emit('returnInputDialog', obj);
				}
			},
			leftClick() {
				var obj = {
					inputStr: "",
					isclose: false,
					tag: this.dataSource.tag
				};
				this.$emit('returnInputDialog', obj);
				this.$refs.popup.close();
			},
			rightClick() {
				if(!this.inputKey){
					uni.showToast({
						title:"请输入内容"
					})
					return
				}
				var obj = {
					inputStr: this.inputKey,
					isclose: false,
					tag: this.dataSource.tag
				};
				this.$emit('returnInputDialog', obj);
				this.$refs.popup.close();
			}
		}
	}
</script>

<style>
	@import "input-dialog.css";
</style>
